<template>
  <nav class="navbar navbar-dark bg-primary mb-4">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">这也文章</a>
        <ul v-if="!user.isLogin" class="list-item mb-0">
            <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注册</a></li>
            <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登陆</a></li>
        </ul>
        <ul v-else class="list-item mb-0">
            <li class="list-inline-item">
                <drop-down :title="user.name">
                  <drop-item><a class="dropdown-item" href="#">新建文章</a></drop-item>
                  <drop-item disabled><a class="dropdown-item" href="#">添加文章</a></drop-item>
                  <drop-item><a class="dropdown-item" href="#">编辑资料</a></drop-item>
                </drop-down>
            </li>
        </ul>
    </div>
  </nav>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import DropDown from './DropDown.vue'
import DropItem from './DropItem.vue'
export interface UserProps {
    isLogin: boolean;
    name?: string;
    id?: number;
}
export default defineComponent({
  name: 'GlobalHeader',
  components: {
    DropDown,
    DropItem
  },
  props: {
    user: {
      type: Object as PropType<UserProps>,
      required: true
    }
  }
})
</script>

<style>
</style>
